<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        text-align: center;
    }
    #container {
        width: 600px;
        height: 480px;
        margin: auto;
    }
</style>

<body>
    <div id="container"></div>
    <button onclick="fun()">获取</button>
</body>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: '8bb928e25f8e2b4744e9bf1bdb177f77',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=	66d4a9f6818ad73625a29c9ce3170196"></script>
<script>
    function fun() {
        navigator.geolocation.getCurrentPosition((res) => {
            console.log(res.coords.longitude, res.coords.latitude);
            var map = new AMap.Map('container', {
                zoom: 11,//级别
                center: [res.coords.longitude, res.coords.latitude],//中心点坐标
                viewMode: '3D'//使用3D视图
            });
        })


        // console.log(navigator.geolocation);
        // if(navigator.geolocation){
        //     console.log(123);
        //     navigator.geolocation.getCurrentPosition(
        //         function (res) {
        //             console.log('成功',res);
        //         },
        //         function (err) {
        //             console.log('失败',err);
        //         }
        //     )
        // }
    }
</script>

</html>